{%extends "base.html"%}
{%block title%}
益文之声点歌姬
{%endblock%}
{%block body%}
<script>
    var submiting = false;
    var submit_data;
    function show_error(str) {
        $("#message").html($("#message").html() + str + "<br>");
        $("#main-form").addClass("error");
    }
    function hide_error() {
        $("#main-form").removeClass("error");
        $("#message").text("");
    }

    function submit() {
        if (submiting) return;
        $("#main-form").removeClass("success");
        hide_error();
        if ($("#song").val().trim() == "") {
            $("#song").parent().addClass("error");
            return;
        }
        if ($("#orderer").val().trim() == "") {
            $("#orderer").parent().addClass("error");
            return;
        }
        var id = $("#song").val().trim();
        if (is_number(id)) {
            id = id;
        } else {
            args = parseUrl(String(id));
            if (args.hasOwnProperty("id")) {
                id = args["id"];
            } else {
                pattern = /\/([1-9][0-9]*)\/?\?/;
                var result = pattern.exec(id);
                if (result == null || result.length <= 1) {
                    show_error("请输入歌曲ID(非用户ID)或者歌曲链接!");
                    return;
                }
                id = result[1];
            }
        } 
        submit_data = JSON.stringify({
            "song": id,
            "orderer": $("#orderer").val(),
            "orderto": $("#order-to").val(),
            "comment": $("#comment").val(),
            "anonymous": $("#anonymous").prop("checked")
        });
        $("#confirm-box iframe").attr("src", "//music.163.com/outchain/player?type=2&id={id}&auto=1&height=66".replace(/\{id\}/g, id));
        $("#confirm-box").modal({
            closable: false,
            onApprove: upload   
        }).modal("show");
    }
    function upload() {
        $("#submit-button").addClass("loading");
        submiting = true;
        $.ajax(
            {
                url: "/api/submit",
                method: "POST",
                data: {
                    data: submit_data
                },
                async: true,
                success: function (res) {
                    res = JSON.parse(res);
                    if (res.status != 0) {
                        show_error(res.message);
                        return;
                    }
                    $("#success-message").html("请牢记以下信息，以便更改提交：<br>提交ID: " + res.submit_id + "<br>密码：" + res.password);
                    $(".submit-form").val("");
                    $("#anonymous").prop("checked", false);
                    $("#main-form").addClass("success");
                    refresh_list();
                },
                complete: function () {
                    $("#submit-button").removeClass("loading");
                    submiting = false;
                }, error: function (req, err) {
                    show_error(err);
                }
            }
        );
    }
    $(this).ready(function () {
        $(this).keydown(function (evt) {
            var focus_elem = $("input:focus");
            if (focus_elem == null) return;
            var id = focus_elem.attr("id");
            if (evt.key == "Enter" && (id == "orderer" || id == "song")) {
                submit();
            }
        });
        hide_error();
        $(".left.corner.labeled").keydown(function () {
            $(this).removeClass("error");
            hide_error();
        })
        $("#submit-button").click(function () {
            submit();
        })
    });

</script>
<div style="top: 10%">
    <div class="ui left aligned container" style="width: 100%">
        <div class="ui header">
            <h1>点歌</h1>
        </div>
        <div class="ui segment stacked ">
            <div class="ui form" id="main-form">
                <div class="field">
                    <div class="ui left corner labeled fluid icon input">
                        <input placeholder="网易云歌曲链接或ID(必填).." id="song" class="submit-form">
                        <div class="ui left corner label" style="top: 0px;left: 0px;">
                            <i class="asterisk icon"></i>
                        </div>
                        <i class="music icon"></i>
                    </div>
                </div>
                <div class="field">
                    <div class="ui left corner labeled fluid icon input">
                        <input placeholder="点歌人姓名及班级(必填).." id="orderer" class="submit-form">
                        <div class="ui left corner label" style="top: 0px;left: 0px;">
                            <i class="asterisk icon"></i>
                        </div>
                        <i class="user icon"></i>
                    </div>
                </div>
                <div class="field">
                    <div class="ui fluid icon input">
                        <input placeholder="被点歌人姓名(可空).." id="order-to" class="submit-form">
                        <i class="at icon"></i>
                    </div>
                </div>
                <div class="field">
                    <div class="ui fluid container">
                        <textarea autofocus id="comment" placeholder="留言(可空).." class="submit-form" style="height:100px;min-height:100px;min-width: 100%;max-width: 100%"></textarea>
                    </div>
                </div>
                <div class="field">
                    <div class="ui checkbox">
                        <input type="checkbox" id="anonymous" class="submit-form">
                        <label>匿名(不会公开身份信息)</label>
                    </div>
                </div>
                <div class="ui error message">
                    <div class="header">
                        错误
                    </div>
                    <p id="message">
                    </p>
                </div>
                <div class="ui success message">
                    <div class="header">
                        提交成功
                    </div>
                    <p id="success-message">
                    </p>
                </div>
                <div class="ui large green submit button" id="submit-button">
                    提交
                </div>
                <a class="ui large blue button" target="__blank" href="/modify">查询..</a>
                <a class="ui" target="__blank" href="https://yutong_java.gitee.io/ywvoice-help/guide.html" style="text-decoration:underline">帮助文档</a>

            </div>
        </div>
        <div class="ui segment stacked" style="min-height: 20%" id="list-container">
            <div class="ui container" style="padding-bottom:28px">
                {%include "list.html"%}
            </div>
        </div>
        <div class="ui modal" id="confirm-box">
            <div class="header">
                您确定要提交该首歌曲吗
            </div>
            <div class="content">
                <div class="ui container">
                    <iframe frameborder="no" border="0" style="margin-left:0;margin-right: 0 ;width:100%" src=""></iframe>
                    <div class="ui negative message">
                        <div class="header">
                            注意
                        </div>
                        <p>请确认这是您要提交的歌曲后再点击确认！</p>
                        <p>提交错误的歌曲ID一律会被驳回！</p>
                    </div>
                </div>
            </div>
            <div class="ui actions">
                <div class="ui approve blue button">
                    确认
                </div>
                <div class="ui cancel button">
                    取消
                </div>
            </div>
        </div>
    </div>
</div>
{%endblock%}